<template>
	<view class="index">
		<view class="huaheadviewone">
			<!-- <view class="huahead" v-if="ClassList.length > 1">
				<view class="huaheadview" :class="current == index ? 'headactive' : ''" v-for="(item, index) in ClassList"
					:key="index" @click="headClick(index)">
					{{ item.name }}
				</view>
			</view> -->
			<swiper class="swiper" :current="current" @change="change">
				<swiper-item v-for="(item, index) in ClassList" :key="index">
					<u-grid :col="5" hover-class="hover-class" :border="false">
						<u-grid-item v-for="(i, ind) in item.icon" :index="ind" :key="ind" @click="tabclick(i)">

							<image :src="i.image" class="claicon" mode=""></image>
							<text class="grid-text">{{ i.name }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
			<view class="xianview">
				<view class="xianitem" :style="{
					width:kdu+'%',
					left:(Number(current)*kdu)+'%'
				}"></view>
			</view>
		</view>
</view>
</template>
  
<script>

export default {
	props: {
		ClassList: {
			type: Array,
			default: [],
		},
		// current: {
		// 	type: Number,
		// 	default: 0
		// },
	},
	data() {
		return {
			ClassListtwo:[
			{
                    id:  4,
                    name:  "生活",
                    icon:  [
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							}
				]
			},
			{
                    id:  4,
                    name:  "生活",
                    icon:  [
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							}
				]
			},
			{
                    id:  4,
                    name:  "生活",
                    icon:  [
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							},
							{
									name:  "省钱话费",
							}
				]
			}
		],
		current:0,
		kdu:0,//选中进度条宽度
		};
	},
	watch: {
		ClassList: {
		  immediate: true, //立即执行
		  deep: true, //深度侦听复杂类型
		  handler(newval, oldval) {
		    // console.log(newval, oldval);
		    if (newval) {
		      this.ClassList = newval
			  this.kdu = 100/(this.ClassList.length)
			//   console.log(this.kdu)
		    }
		  }
		}
	},

	created() {
		// this.kdu = 100/(this.ClassList.length)
		// console.log(this.kdu)
	},
	onShow() {
	},
	onReady() { },
	onLoad() {

	},
	mounted() { },
	onPageScroll(res) {
	},
	onHide() { },
	methods: {
		headClick(e) {
			this.$emit('headClick', e)
		},
		change(e) {
			this.current = e.detail.current;
			// console.log(this.current)
			this.$emit('change', e)
			// console.log(this.current)
		},
		tabclick(i) {
			this.toPage(i)
			// this.$emit('tabclick', index, ind)
			// tabclick
		}
	}
}
</script>
  
<style lang="scss" scoped>
.huaheadviewone{
	padding: 20rpx 0;
	background-color: #fff;
	position: relative;
	// margin: 30rpx;
	// border-radius: 20rpx;
}
.classname {
	width: 50px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: break-word;
	/*强制换行*/
	overflow: hidden;
	/*超出隐藏*/
	text-overflow: ellipsis;
	/*隐藏后添加省略号*/
	white-space: nowrap;
	/*强制不换行*/
}

.grid-text {
	font-weight: 400;
	font-size: 26rpx;
	color: #333333;
	margin-top: 12rpx;
	display: block;
}

.swiper {
	// height: 480rpx;
	// margin: 0 30rpx 0rpx;
}

.indicator-dots {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.indicator-dots-item {
	background-color: $u-tips-color;
	height: 6px;
	width: 6px;
	border-radius: 10px;
	margin: 0 3px;
}

.indicator-dots-active {
	background-color: $u-type-primary;
}

.huahead {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #fff;

	// margin-top: 30rpx;
	// margin: 30rpx 30rpx 0;
	// padding-top: 30rpx;
	// border-radius: 20rpx 20rpx 0 0 ;
	.huaheadview {
		// width: 20%;
		flex: 1;
		// height: 100rpx;
		display: flex;
		align-items: center;
		color: #333;
		font-weight: 400;
		justify-content: center;
		border-right: 1rpx solid #eee;
		margin: 10rpx 0;
	}

	.headactive {
		color: rgb(237, 0, 25) !important;
		font-weight: bold !important;
	}

	.huaheadview:last-child {
		border-right: none;
	}
}

.huaheadviewone {
	padding: 20rpx 0;
	background-color: #fff;
	position: relative;
	// margin: 30rpx;
	// border-radius: 20rpx;
}

.blob {
	// width: 100%;
	// height: 68rpx;
	// width: 75%;
	// margin: 20rpx 20rpx 0;
	margin-left: auto;
	border-radius: 11rpx;
	overflow: hidden;
	height: 88rpx;
	background: #fff;
	margin-left: 40rpx;
	flex: 1;
	// border-radius: 30rpx;
	position: relative;

	.blobview {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #333;
	}

	.blobviewleft {
		width: 15%;
		height: 100%;
		display: flex;
		padding-left: 15px;
		align-items: center;

		.zuixin {
			width: 39rpx;
			height: 43rpx;
			position: relative;
			top: -2px;
		}

		text {
			font-style: italic;
			font-weight: bold;
			color: rgba(96, 199, 196, 1);
		}
	}

	.blobnav {
		width: 80%;
		display: flex;
		align-items: center;
		height: 100%;
		position: relative;
		width: 93%;
		margin-left: 30rpx;
	}

	.blobnavswiper {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.blobnavswipers {
		display: flex;
		align-items: center;
	}

	.blobright {
		width: 15%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.gright {
			width: 39rpx;
			height: 28rpx;
		}
	}
}

.blobbot {
	width: 94%;
	// height: 68rpx;
	margin-left: 3%;
	z-index: 100;
	overflow: hidden;
	height: 50rpx;
	background: #212121;
	// border-radius: 30rpx;
	position: fixed;
	bottom: 10%;
	border-radius: 25rpx;

	.blobview {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.blobviewleft {
		width: 27%;
		height: 100%;
		display: flex;
		padding-left: 12px;
		align-items: center;

		.zuixin {
			width: 190rpx;
			height: 60rpx;
			position: relative;
			top: -2px;
		}

		text {
			font-style: italic;
			font-weight: bold;
			color: rgba(96, 199, 196, 1);
		}
	}

	.blobnav {
		width: 80%;
		display: flex;
		align-items: center;
		height: 100%;
		position: relative;

	}

	.blobnavswiper {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.blobnavswipers {
		display: flex;
		align-items: center;
	}

	.blobright {
		width: 15%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.gright {
			width: 39rpx;
			height: 28rpx;
		}
	}
}
.claicon{
	width: 87rpx;
	height: 87rpx;
	border-radius: 50%;
}
.xianview{
	width: 90rpx;
	height: 8rpx;
	background: #EEEEEE;
	border-radius: 4rpx;
	margin: 30rpx auto;
	position: relative;
	.xianitem{
		width: 20%;
		height: 8rpx;
		background: #FA4E4E;
		border-radius: 4rpx;
		display: inline-block;
		position: absolute;
		left: 0;
	}
}

/deep/.u-grid-item {
	min-height: 75px;
}

/deep/ .u-grid-item-box {
	padding: 0 !important;
	margin-bottom: 30rpx;
}</style>